<template>
	<view class="contacts-container">
		<!-- 顶部选项卡 -->
		<u-tabs :list="tabsList" :is-scroll="false" :current="currentTab" @change="changeTab"
			active-color="#2979ff"></u-tabs>


		<!-- 搜索功能 -->
		<view v-if="currentTab === 0" class="search-section">
			<u-search placeholder="请输入搜索关键词" v-model="searchKeyword" :show-action="true" action-text="搜索" bgColor="#fff"
				@search="handleSearch" @custom="handleSearch"></u-search>
			<view class="picker-card">
				<u-grid :col="3" :border="true" @click="pickerClick">
					<u-grid-item v-for="(filter, index) in filters" :key="index">
						<view class="flex-card">
							<text>{{filter.title}}</text>
							<u-icon name="arrow-down" color="#999" size="16" v-if="!filter.show"></u-icon>
							<u-icon name="arrow-up" color="#999" size="16" v-else></u-icon>
						</view>


					</u-grid-item>
				</u-grid>
				<u-picker ref="uPicker" :show="currentShow" :columns="currentColumns" @confirm="confirm"
					@change="changeHandler" @cancel="handleCancel" :closeOnClickOverlay="true"
					@close="handleCancel"></u-picker>
			</view>
			<view class="search-results">
				<view v-for="(item, index) in searchResults" :key="index" class="contact-item">
					<view class="item-left">
						<u-avatar :src="item.avatar" size="60"></u-avatar>
						<view class="user-info">
							<text class="username">{{ item.name }}</text>
							<text class="user-desc">{{ item.age }}岁 · {{ item.height }}cm · {{ item.city }}</text>
						</view>
					</view>
					<view class="item-right">
						<u-button size="mini" @click="toggleFollow(item)">{{ item.followed ? '已关注' : '关注' }}</u-button>
						<u-button open-type="share" size="mini" type="primary"
							@click="shareToWechat(item)">转发</u-button>
					</view>
				</view>
			</view>
		</view>


		<!-- 已关注功能 -->
		<view v-if="currentTab === 1" class="followed-section">
			<view v-for="(item, index) in followedList" :key="index" class="followed-item">
				<view class="item-left">
					<u-avatar :src="item.avatar" size="60"></u-avatar>
					<view class="user-info">
						<text class="username">{{ item.name }}</text>
						<text class="user-desc">{{ item.lastMessage || '暂无留言' }}</text>
					</view>
				</view>
				<view class="item-right">
					<u-button size="mini" type="error" @click="unfollow(item)">取消关注</u-button>
					<u-button size="mini" type="primary" @click="sendMessage(item)">发送留言</u-button>
				</view>
			</view>
		</view>


		<!-- 爱慕留言吧 -->
		<view v-if="currentTab === 2" class="messages-section">
			<view v-for="(msg, index) in messageList" :key="index" class="message-item">
				<view class="message-header">
					<u-avatar :src="msg.sender.avatar" size="50"></u-avatar>
					<text class="sender-name">{{ msg.sender.name }}</text>
					<text class="message-time">{{ formatTime(msg.time) }}</text>
				</view>
				<view class="message-content">{{ msg.content }}</view>
				<view v-if="msg.reply" class="message-reply">
					<text>我的回复: {{ msg.reply }}</text>
				</view>
				<view v-else class="message-actions">
					<u-button size="" type="primary" shape="circle" @click="showReplyDialog(msg)">回复</u-button>
				</view>
			</view>
		</view>


		<!-- 朋友圈日志 -->
		<view v-if="currentTab === 3" class="moments-section">
			<view class="post-input">
				<u-input v-model="newPostContent" type="textarea" placeholder="分享你的生活..."></u-input>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>


				<u-button type="primary" @click="publishPost">发表</u-button>
			</view>


			<view v-for="(post, index) in postList" :key="index" class="post-item">
				<view class="post-header" @click="viewUserProfile(post.user)">
					<u-avatar :src="post.user.avatar" size="50"></u-avatar>
					<view class="post-user-info">
						<text class="username">{{ post.user.name }}</text>
						<text class="post-time">{{ formatTime(post.time) }}</text>
					</view>
				</view>
				<view class="post-content">{{ post.content }}</view>
				<view v-if="post.images && post.images.length > 0" class="post-images">
					<u-row gutter="10">
						<u-col v-for="(img, imgIndex) in post.images" :key="imgIndex" span="4">
							<image :src="img" mode="aspectFill" @click="previewImage(post.images, imgIndex)"></image>
						</u-col>
					</u-row>
				</view>
				<view class="post-actions">
					<u-icon name="thumb-up" size="24" :color="post.liked ? '#2979ff' : '#606266'"
						@click="toggleLike(post)"></u-icon>
					<u-icon name="chat" size="24" color="#606266" @click="showCommentInput(post)"></u-icon>
				</view>
			</view>
		</view>


		<!-- 回复留言弹窗 -->
		<u-modal :show="showReplyModal" :show-cancel-button="true" @confirm="confirmReply" @cancel="cancelReply">
			<view class="modal-content">
				<text>注意：留言资费标准: 每条回复需消耗10积分</text>
				<u-input v-model="replyContent" type="textarea" placeholder="请输入回复内容"></u-input>

			</view>
		</u-modal>


		<!-- 留言弹窗 -->
		<u-modal :show="showMessageModal" :show-cancel-button="true" @confirm="sendMessageConfirm"
			@cancel="cancelMessage">
			<view class="modal-content">
				<u-input v-model="messageContent" type="textarea" placeholder="请输入留言内容"></u-input>
			</view>
		</u-modal>
		<tabBar />
	</view>
</template>


<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabsList: [{
						name: '搜索'
					},
					{
						name: '已关注'
					},
					{
						name: '爱慕留言'
					},
					{
						name: '朋友圈'
					}
				],
				searchKeyword: '',
				currentShow: false,
				currentId: null,
				currentColumns: [],
				filters: [{
						title: '性别',
						value: 'all',
						show: false,
						columns: [
							['全部', '男', '女']
						]
					},
					{
						title: '年龄',
						value: 'all',
						show: false,
						columns: [
							['全部', '18-25岁', '26-35岁', '36岁以上']
						]
					},
					{
						title: '身高',
						value: 'all',
						show: false,
						columns: [
							['全部', '160cm以下', '160-175cm', '176cm以上']
						]


					},
					{
						title: '学历',
						value: 'all',
						show: false,
						columns: [
							[
								'全部',
								'高中及以下',
								'大专',
								'本科',
								'硕士及以上',
							]
						]
					},
					{
						title: '籍贯地',
						value: 'all',
						show: false,
						columns: [
							['全部', '北京', '上海', '广州', '深圳', ]
						],


					},
					{
						title: '工作城市',
						value: 'all',
						show: false,
						columns: [
							['全部', '北京', '上海', '广州', '深圳', ]
						],


					}
				],
				searchResults: [],
				followedList: [],
				messageList: [],
				postList: [],
				newPostContent: '',
				uploadUrl: 'https://example.com/upload',
				fileList: [],
				showReplyModal: false,
				replyContent: '',
				currentMessage: null,
				showMessageModal: false,
				messageContent: '',
				currentContact: null
			}
		},
		onLoad() {
			this.loadData();
		},
		onShareTimeline(res) {
			console.log('111', res)
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: 'pages/contacts/index?id=123'
			}
		},
		methods: {
			changeTab({
				index
			}) {
				console.log('index', index)
				this.currentTab = index;
			},
			loadData() {
				// 模拟数据加载
				this.searchResults = [{
						id: 1,
						name: '张三',
						avatar: 'https://example.com/avatar1.jpg',
						age: 28,
						height: 175,
						gender: 'male',
						education: 'bachelor',
						hometown: 'beijing',
						city: 'shanghai',
						followed: false
					},
					{
						id: 2,
						name: '李四',
						avatar: 'https://example.com/avatar2.jpg',
						age: 25,
						height: 165,
						gender: 'female',
						education: 'master',
						hometown: 'shanghai',
						city: 'beijing',
						followed: true
					}
				];


				this.followedList = [{
					id: 2,
					name: '李四',
					avatar: 'https://example.com/avatar2.jpg',
					lastMessage: '你好，很高兴认识你'
				}];


				this.messageList = [{
						id: 1,
						sender: {
							id: 3,
							name: '王五',
							avatar: 'https://example.com/avatar3.jpg'
						},
						content: '你好，可以认识一下吗？',
						time: new Date().getTime() - 3600000,
						reply: null
					},
					{
						id: 2,
						sender: {
							id: 4,
							name: '赵六',
							avatar: 'https://example.com/avatar4.jpg'
						},
						content: '你的资料很吸引我，希望能进一步了解',
						time: new Date().getTime() - 86400000,
						reply: '谢谢，我也很高兴认识你'
					}
				];


				this.postList = [{
						id: 1,
						user: {
							id: 2,
							name: '李四',
							avatar: 'https://example.com/avatar2.jpg'
						},
						content: '今天天气真好，出去散步了',
						images: [
							'https://example.com/post1-1.jpg',
							'https://example.com/post1-2.jpg'
						],
						time: new Date().getTime() - 7200000,
						liked: false,
						comments: []
					},
					{
						id: 2,
						user: {
							id: 3,
							name: '王五',
							avatar: 'https://example.com/avatar3.jpg'
						},
						content: '分享一道自己做的菜，希望大家喜欢',
						images: [
							'https://example.com/post2-1.jpg'
						],
						time: new Date().getTime() - 86400000,
						liked: true,
						comments: [{
							user: {
								id: 1,
								name: '张三'
							},
							content: '看起来很好吃！'
						}]
					}
				];
			},
			handleSearch() {
				// 实际项目中这里应该是API请求
				console.log('搜索条件:', this.searchKeyword, this.filters);
				uni.showLoading({
					title: '搜索中...'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里简单模拟搜索结果
					this.searchResults = this.searchResults.filter(item => {
						return item.name.includes(this.searchKeyword) ||
							(this.filters[0].value !== 'all' && item.gender === this.filters[0].value) ||
							(this.filters[1].value !== 'all' && this.checkAge(item.age, this.filters[1]
								.value)) ||
							(this.filters[2].value !== 'all' && this.checkHeight(item.height, this.filters[
								2].value)) ||
							(this.filters[3].value !== 'all' && item.education === this.filters[3]
								.value) ||
							(this.filters[4].value !== 'all' && item.hometown === this.filters[4].value) ||
							(this.filters[5].value !== 'all' && item.city === this.filters[5].value);
					});
				}, 1000);
			},
			pickerClick(index) {
				console.log('11', index)
				this.currentId = index
				this.filters[index].show = !this.filters[index].show
				this.currentColumns = this.filters[index].columns
				this.currentShow = this.filters[index].show


			},
			changeHandler(e) {
				console.log('e', e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// e.value是当前选择的值


			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.currentShow = false
				this.filters[this.currentId].show = false
			},
			handleCancel() {
				this.currentShow = false
				this.filters[this.currentId].show = false
			},


			// checkAge(age, range) {
			//     if (range === '18-25') return age >= 18 && age <= 25;
			//     if (range === '26-35') return age >= 26 && age <= 35;
			//     if (range === '36+') return age >= 36;
			//     return false;
			// },
			// checkHeight(height, range) {
			//     if (range === '<160') return height < 160;
			//     if (range === '160-175') return height >= 160 && height <= 175;
			//     if (range === '>176') return height > 176;
			//     return false;
			// },
			toggleFollow(item) {
				item.followed = !item.followed;
				if (item.followed) {
					this.followedList.push({
						id: item.id,
						name: item.name,
						avatar: item.avatar,
						lastMessage: ''
					});
					uni.showToast({
						title: '关注成功',
						icon: 'success'
					});
				} else {
					this.followedList = this.followedList.filter(f => f.id !== item.id);
					uni.showToast({
						title: '已取消关注',
						icon: 'none'
					});
				}
			},
			shareToWechat(item) {
				console.log("item", item)
				// 分享
				// wx.updateShareMenu({
				//     withShareTicket: true, // 是否使用带 shareTicket 的转发详情
				//     activityId: '', // 自定义转发内容 id, 只有使用到微信提供的一些特定服务时才需要填写，普通应用可以忽略此字段
				//     success(res) {
				//         console.log('更新转发菜单成功');
				//     },
				//     fail(err) {
				//         console.error('更新转发菜单失败', err);
				//     }
				// });
				// wx.share({
				//   provider: 'weixin',
				//   scene: 'WXSceneSession',
				//   type: 0,
				//   title: '推荐联系人给你',
				//   summary: `推荐${item.name}给你，年龄${item.age}岁，身高${item.height}cm，目前在${item.city}工作`,
				//   success: function(res) {
				//     console.log('分享成功:', res);
				//   },
				//   fail: function(err) {
				//     console.log('分享失败:', err);
				//   }
				// });
			},
			unfollow(item) {
				this.followedList = this.followedList.filter(f => f.id !== item.id);
				this.searchResults.forEach(r => {
					if (r.id === item.id) r.followed = false;
				});
				uni.showToast({
					title: '已取消关注',
					icon: 'none'
				});
			},
			sendMessage(item) {
				this.currentContact = item;
				this.showMessageModal = true;
			},
			sendMessageConfirm() {
				if (!this.messageContent.trim()) {
					uni.showToast({
						title: '留言内容不能为空',
						icon: 'none'
					});
					return;
				}


				// 模拟发送留言
				this.currentContact.lastMessage = this.messageContent;
				uni.showToast({
					title: '留言发送成功',
					icon: 'success'
				});
				this.showMessageModal = false;
				this.messageContent = '';
			},
			cancelMessage() {
				this.showMessageModal = false;
				this.messageContent = '';
			},
			showReplyDialog(msg) {
				this.currentMessage = msg;
				this.replyContent = '';
				this.showReplyModal = true;
			},
			confirmReply() {
				if (!this.replyContent.trim()) {
					uni.showToast({
						title: '回复内容不能为空',
						icon: 'none'
					});
					return;
				}


				// 模拟回复留言
				this.currentMessage.reply = this.replyContent;
				uni.showToast({
					title: '回复成功',
					icon: 'success'
				});
				this.showReplyModal = false;
			},
			cancelReply() {
				this.showReplyModal = false;
			},
			formatTime(timestamp) {
				const now = new Date().getTime();
				const diff = now - timestamp;


				if (diff < 60000) {
					return '刚刚';
				} else if (diff < 3600000) {
					return Math.floor(diff / 60000) + '分钟前';
				} else if (diff < 86400000) {
					return Math.floor(diff / 3600000) + '小时前';
				} else {
					return Math.floor(diff / 86400000) + '天前';
				}
			},
			handleUploaded(lists) {
				console.log('上传完成:', lists);
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},


			publishPost() {
				if (!this.newPostContent.trim() && !this.fileList.length) {
					uni.showToast({
						title: '内容或图片不能为空',
						icon: 'none'
					});
					return;
				}


				const newPost = {
					id: Date.now(),
					user: {
						id: 1, // 当前用户ID
						name: '当前用户',
						avatar: 'https://example.com/current-avatar.jpg'
					},
					content: this.newPostContent,
					images: this.fileList.map(item => item.url),
					time: new Date().getTime(),
					liked: false,
					comments: []
				};


				this.postList.unshift(newPost);
				this.newPostContent = '';
				this.fileList = '';
				uni.showToast({
					title: '发表成功',
					icon: 'success'
				});
			},
			toggleLike(post) {
				post.liked = !post.liked;
				uni.showToast({
					title: post.liked ? '点赞成功' : '已取消点赞',
					icon: 'none'
				});
			},
			showCommentInput(post) {
				uni.showModal({
					title: '评论',
					content: '',
					editable: true,
					placeholderText: '请输入评论内容',
					success: (res) => {
						if (res.confirm && res.content) {
							post.comments.push({
								user: {
									id: 1, // 当前用户ID
									name: '当前用户'
								},
								content: res.content
							});
							uni.showToast({
								title: '评论成功',
								icon: 'none'
							});
						}
					}
				});
			},
			viewUserProfile(user) {
				uni.navigateTo({
					url: `/pages/user/profile?id=${user.id}`
				});
			},
			previewImage(images, index) {
				uni.previewImage({
					current: index,
					urls: images
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.contacts-container {
		padding: 0;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	/* 顶部选项卡优化 */
	.u-tabs {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #fff;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
		padding: 0 20rpx;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1rpx;
			background-color: rgba(0, 0, 0, 0.05);
		}
	}

	/* 搜索区域优化 */
	.search-section {
		padding: 24rpx;

		.u-search {
			background-color: #fff;
			border-radius: 48rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			padding: 0 24rpx;

			::v-deep .u-content {
				padding-left: 16rpx;
			}
		}
	}

	/* 筛选卡片优化 */
	.picker-card {
		margin: 24rpx 0 0;
		background-color: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

		.u-grid {
			padding: 0;

			.u-grid-item {
				padding: 28rpx 0;
				border-right: 1rpx solid rgba(0, 0, 0, 0.03);
				position: relative;

				&:last-child {
					border-right: none;
				}

				&.active {
					.flex-card {
						color: #2979ff;

						.u-icon {
							color: #2979ff;
						}
					}
				}
			}
		}

		.flex-card {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			font-weight: 500;

			.u-icon {
				margin-left: 8rpx;
				transition: all 0.3s;
			}
		}
	}

	/* 通用卡片样式 */
	.contact-item,
	.followed-item,
	.message-item,
	.post-item {
		margin: 24rpx 0;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		}
	}

	/* 用户信息区域 */
	.item-left {
		display: flex;
		align-items: center;

		.u-avatar {
			border: 2rpx solid rgba(255, 255, 255, 0.8);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		}

		.user-info {
			margin-left: 28rpx;
			flex: 1;

			.username {
				font-size: 34rpx;
				font-weight: 600;
				color: #333;
				line-height: 1.4;
				letter-spacing: 0.5rpx;
			}

			.user-desc {
				font-size: 26rpx;
				color: #909399;
				margin-top: 8rpx;
				display: flex;
				align-items: center;

				&::before {
					content: '';
					display: inline-block;
					width: 6rpx;
					height: 6rpx;
					background-color: #909399;
					border-radius: 50%;
					margin-right: 12rpx;
				}
			}
		}
	}

	/* 操作按钮区域 */
	.item-right {
		margin-top: 28rpx;
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;

		.u-button {
			min-width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-weight: 500;
			transition: all 0.3s;

			&[type="primary"] {
				background: #3c9cff;
				box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.3);

				&:active {
					opacity: 0.9;
				}
			}

			&[type="error"] {
				background: linear-gradient(135deg, #fa3534, #ff7875);
				box-shadow: 0 4rpx 16rpx rgba(250, 53, 52, 0.2);

				&:active {
					opacity: 0.9;
				}
			}

			&[plain] {
				background: #fff;
				border: 1rpx solid #dcdfe6;
				color: #606266;

				&:active {
					background-color: #f5f7fa;
				}
			}
		}
	}

	/* 留言区域优化 */
	.message-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.sender-name {
			margin-left: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			flex: 1;
		}

		.message-time {
			font-size: 24rpx;
			color: #999;
			font-weight: 400;
		}
	}

	.message-content {
		padding: 24rpx 0;
		font-size: 30rpx;
		color: #333;
		line-height: 1.6;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.message-reply {
		padding-top: 24rpx;
		font-size: 28rpx;
		color: #2979ff;
		position: relative;
		padding-left: 32rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 28rpx;
			width: 20rpx;
			height: 2rpx;
			background-color: #2979ff;
		}
	}

	/* 朋友圈发布区域 */
	.post-input {
		margin: 24rpx;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);

		.u-input {
			padding: 20rpx;
			background-color: #f8fafc;
			border-radius: 16rpx;
			min-height: 160rpx;
			font-size: 30rpx;
			line-height: 1.6;
		}

		.u-upload {
			margin: 24rpx 0;
		}

		.u-button {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			background: #3c9cff;
			box-shadow: 0 6rpx 20rpx rgba(41, 121, 255, 0.3);
			transition: all 0.3s;

			&:active {
				opacity: 0.9;
				transform: translateY(2rpx);
			}
		}
	}

	/* 朋友圈帖子优化 */
	.post-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.post-user-info {
			margin-left: 24rpx;

			.username {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				line-height: 1.4;
			}

			.post-time {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
			}
		}
	}

	.post-content {
		font-size: 30rpx;
		color: #333;
		line-height: 1.6;
		margin-bottom: 24rpx;
	}

	.post-images {
		margin-bottom: 24rpx;

		image {
			width: 100%;
			height: 240rpx;
			border-radius: 12rpx;
			background-color: #f5f7fa;
			transition: all 0.3s;

			&:active {
				opacity: 0.9;
			}
		}
	}

	.post-actions {
		display: flex;
		padding-top: 24rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);

		.u-icon {
			margin-right: 48rpx;
			font-size: 40rpx;
			padding: 8rpx;
			transition: all 0.3s;

			&:active {
				transform: scale(0.9);
			}
		}
	}

	/* 弹窗优化 */
	.modal-content {
		// padding: 32rpx;
		width: 100%;

		text {
			display: block;
			margin-bottom: 24rpx;
			font-size: 28rpx;
			color: #f56c6c;
			text-align: center;
		}

		.u-input {
			padding: 24rpx;
			background-color: #f8fafc;
			border-radius: 16rpx;
			min-height: 240rpx;
			font-size: 30rpx;
			line-height: 1.6;
		}
	}

	/* 空状态优化 */
	.u-empty {
		margin-top: 120rpx;

		::v-deep .u-empty__image {
			width: 240rpx !important;
			height: 240rpx !important;
		}

		::v-deep .u-empty__text {
			font-size: 28rpx;
			color: #909399;
			margin-top: 24rpx;
		}
	}
</style>